<template>
  <div class="comment-reply-list">
    <!-- 筛选区域 -->
    <div class="filter-section">
      <div class="filter-container">
        <div class="filter-group">
          <label class="filter-label">通知类型</label>
          <div class="filter-buttons">
            <el-button
              :type="queryParams.type === '' ? 'primary' : ''"
              size="default"
              @click="handleFilterChange('type', '')"
            >
              全部
            </el-button>
            <el-button
              :type="queryParams.type === 'COMMENT' ? 'primary' : ''"
              size="default"
              @click="handleFilterChange('type', 'COMMENT')"
            >
              <el-icon><ChatDotRound /></el-icon>
              <span>评论</span>
              <span v-if="stats.unreadCommentCount" class="count-badge">
                {{ stats.unreadCommentCount }}
              </span>
            </el-button>
            <el-button
              :type="queryParams.type === 'REPLY' ? 'primary' : ''"
              size="default"
              @click="handleFilterChange('type', 'REPLY')"
            >
              <el-icon><Comment /></el-icon>
              <span>回复</span>
              <span v-if="stats.unreadReplyCount" class="count-badge">
                {{ stats.unreadReplyCount }}
              </span>
            </el-button>
            <el-button
              :type="queryParams.type === 'MENTION' ? 'primary' : ''"
              size="default"
              @click="handleFilterChange('type', 'MENTION')"
            >
              <el-icon><Position /></el-icon>
              <span>@提及</span>
            </el-button>
          </div>
        </div>

        <div class="filter-group">
          <label class="filter-label">阅读状态</label>
          <div class="filter-buttons">
            <el-button
              :type="queryParams.isRead === null ? 'primary' : ''"
              size="default"
              @click="handleFilterChange('isRead', null)"
            >
              全部
            </el-button>
            <el-button
              :type="queryParams.isRead === 0 ? 'primary' : ''"
              size="default"
              @click="handleFilterChange('isRead', 0)"
            >
              <span class="status-dot unread" />
              未读
            </el-button>
            <el-button
              :type="queryParams.isRead === 1 ? 'primary' : ''"
              size="default"
              @click="handleFilterChange('isRead', 1)"
            >
              <span class="status-dot read" />
              已读
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 批量操作工具栏 -->
    <div v-if="notificationList.length > 0" class="batch-actions-bar">
      <div class="actions-left">
        <template v-if="!selectionMode">
          <span class="result-count">
            共 <strong>{{ total }}</strong> 条通知
            <template v-if="unreadCount > 0">
              ，<strong class="unread-count">{{ unreadCount }}</strong> 条未读
            </template>
          </span>
        </template>
        <template v-else>
          <el-checkbox
            v-model="selectAll"
            :indeterminate="isIndeterminate"
            @change="handleSelectAll"
          >
            全选
          </el-checkbox>
          <span class="selected-count">
            已选中 <strong>{{ selectedIds.length }}</strong> 条
          </span>
        </template>
      </div>
      <div class="actions-right">
        <template v-if="!selectionMode">
          <el-button
            v-if="unreadCount > 0"
            type="primary"
            size="default"
            :icon="Check"
            @click="handleMarkAllAsRead"
          >
            全部标为已读
          </el-button>
          <el-button size="default" @click="enterSelectionMode">
            选择
          </el-button>
        </template>
        <template v-else>
          <el-button
            type="danger"
            size="default"
            :disabled="selectedIds.length === 0"
            @click="handleBatchDelete"
          >
            删除选中({{ selectedIds.length }})
          </el-button>
          <el-button size="default" @click="exitSelectionMode">
            取消
          </el-button>
        </template>
      </div>
    </div>

    <!-- 通知列表 -->
    <div v-loading="loading" class="notification-list">
      <div
        v-for="item in notificationList"
        :key="item.id"
        class="notification-item"
        :class="{
          'is-unread': item.isRead === 0,
          'selection-mode': selectionMode
        }"
        @click="!selectionMode && handleItemClick(item)"
      >
        <!-- 选择框 -->
        <div v-if="selectionMode" class="item-checkbox" @click.stop>
          <el-checkbox
            :model-value="selectedIds.includes(item.id)"
            @change="toggleSelect(item.id)"
          />
        </div>

        <!-- 左侧图标区 -->
        <div class="item-icon">
          <div class="icon-wrapper" :class="`icon-${item.type.toLowerCase()}`">
            <el-icon>
              <component
                :is="
                  item.type === 'COMMENT'
                    ? ChatDotRound
                    : item.type === 'REPLY'
                      ? Comment
                      : item.type === 'MENTION'
                        ? Position
                        : ChatDotRound
                "
              />
            </el-icon>
          </div>
          <!-- 未读红点 -->
          <span v-if="item.isRead === 0" class="unread-dot" />
        </div>

        <!-- 中间内容区域 -->
        <div class="item-content">
          <!-- 头像 + 标题 -->
          <div class="content-header">
            <!-- 头像 -->
            <el-avatar :src="formatAvatarUrl(item.sender?.avatar)" :size="32">
              {{ item.sender?.nickName?.charAt(0) }}
            </el-avatar>

            <!-- 用户信息和动作 -->
            <div class="user-info">
              <span class="user-name">{{ item.sender?.nickName }}</span>
              <span class="action-text">{{ getActionText(item) }}</span>
            </div>
          </div>

          <!-- 原评论（被回复的评论） -->
          <div v-if="getOriginalComment(item)" class="original-comment-box">
            <div class="original-label">原评论</div>
            <div class="original-content">
              <span class="original-author">{{
                getOriginalComment(item).commenter?.nickName
              }}</span
              >:
              {{ getOriginalComment(item).content }}
            </div>
          </div>

          <!-- 评论/回复内容 -->
          <div v-if="getCommentContent(item)" class="content-summary">
            <div class="comment-content">
              <span class="quote-icon">“</span>
              {{ getCommentContent(item) }}
              <span class="quote-icon">”</span>
            </div>
          </div>

          <!-- 文章信息 -->
          <div
            v-if="getArticleInfo(item)"
            class="article-info-box"
            @click.stop="handleJumpToArticle(item)"
          >
            <el-icon class="article-icon"><Document /></el-icon>
            <div class="article-content">
              <div class="article-title">{{ getArticleInfo(item).title }}</div>
              <div v-if="getArticleInfo(item).summary" class="article-summary">
                {{ getArticleInfo(item).summary }}
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧信息区域 -->
        <div class="item-aside" @click.stop>
          <!-- 时间 -->
          <span class="item-time">{{ formatTime(item.createTime) }}</span>

          <!-- 快捷操作 -->
          <div v-if="!selectionMode" class="item-actions">
            <el-button
              v-if="item.isRead === 0"
              size="small"
              text
              type="primary"
              title="标记已读"
              @click="handleMarkAsRead(item)"
            >
              <el-icon><Check /></el-icon>
            </el-button>
            <span v-else class="read-text">已读</span>
            <el-popconfirm
              title="确定要删除这条通知吗？"
              confirm-button-text="确定"
              cancel-button-text="取消"
              @confirm="handleDeleteSingle(item.id)"
            >
              <template #reference>
                <el-button size="small" text type="danger" title="删除">
                  <el-icon><Delete /></el-icon>
                </el-button>
              </template>
            </el-popconfirm>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <el-empty
        v-if="!loading && notificationList.length === 0"
        description="暂无通知"
      />
    </div>

    <!-- 分页 -->
    <div v-if="total > 0" class="notification-pagination">
      <el-pagination
        v-model:current-page="queryParams.pageNum"
        v-model:page-size="queryParams.pageSize"
        :total="total"
        :page-sizes="[10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="handlePageChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import {
  ChatDotRound,
  Comment,
  Position,
  Check,
  Delete,
  Document
} from "@element-plus/icons-vue";
import {
  getNotificationListApi,
  markNotificationAsReadApi,
  markAllNotificationsAsReadApi,
  deleteNotificationApi,
  batchDeleteNotificationsApi,
  type NotificationDetail,
  type NotificationListQuery
} from "@/api/notification";
import { formatAvatarUrl } from "@/utils/avatar";
import { notificationService } from "@/services/notificationService";

// 路由实例
const router = useRouter();

// 响应式数据
const loading = ref(false);
const notificationList = ref<NotificationDetail[]>([]);
const total = ref(0);
const selectionMode = ref(false);
const selectedIds = ref<number[]>([]);
const selectAll = ref(false);

// 请求去重相关
const isRequesting = ref(false); // 同步锁：标记是否正在请求中（防止毫秒级并发调用）
const isInitialized = ref(false); // 标记是否已完成初始化加载

// 查询参数
const queryParams = reactive<NotificationListQuery>({
  pageNum: 1,
  pageSize: 20,
  type: "", // 空字符串表示查询所有类型（COMMENT、REPLY、MENTION）
  isRead: null // null 表示查询所有状态（未读+已读）
});

// 使用单例服务的统计数据
const statsRef = notificationService.getStatsRef();
const stats = computed(() => {
  return (
    statsRef.value || {
      unreadCommentCount: 0,
      unreadReplyCount: 0
    }
  );
});

// 计算未读数量
const unreadCount = computed(() => {
  return notificationList.value.filter(item => item.isRead === 0).length;
});

// 是否为半选状态
const isIndeterminate = computed(() => {
  const len = selectedIds.value.length;
  return len > 0 && len < notificationList.value.length;
});

// 加载通知列表
const loadNotifications = async () => {
  // 🔑 同步锁：最高优先级的并发去重，立即检查并设置标志位
  if (isRequesting.value) {
    console.log(
      "⏭️ 评论和回复通知列表已有请求正在进行中（同步锁），跳过本次调用"
    );
    return;
  }
  isRequesting.value = true;

  try {
    // 🔑 并发去重: 如果当前已经在加载中，则跳过本次请求，避免重复触发
    if (loading.value) {
      console.log("⏭️ 评论和回复通知列表正在加载中，跳过重复请求");
      return;
    }

    loading.value = true;
    try {
      // 后端已支持 type 为空时直接查询所有评论和回复信息，无需多次请求
      const response = await getNotificationListApi(queryParams);
      if (response.code === 200 && response.data) {
        notificationList.value = response.data.records;
        total.value = response.data.total;
      }
    } catch (error) {
      ElMessage.error("加载通知失败");
      console.error(error);
    } finally {
      loading.value = false;
    }
  } finally {
    // 无论成功失败，最终都要释放同步锁
    isRequesting.value = false;
  }
};

// 加载统计数据
const loadStats = async () => {
  await notificationService.loadStats();
};

// 处理筛选变化
const handleFilterChange = (field: string, value: any) => {
  // 🔑 如果还未初始化完成,不触发请求
  if (!isInitialized.value) {
    if (field === "type") {
      queryParams.type = value;
    } else if (field === "isRead") {
      queryParams.isRead = value;
    }
    return;
  }

  if (field === "type") {
    queryParams.type = value;
  } else if (field === "isRead") {
    queryParams.isRead = value;
  }
  queryParams.pageNum = 1;
  loadNotifications();
};

// 处理分页变化
const handlePageChange = (page: number) => {
  queryParams.pageNum = page;
  loadNotifications();
};

const handleSizeChange = (size: number) => {
  queryParams.pageSize = size;
  queryParams.pageNum = 1;
  loadNotifications();
};

// 全部标记为已读
const handleMarkAllAsRead = async () => {
  try {
    await ElMessageBox.confirm("确定要将所有通知标记为已读吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    });

    const response = await markAllNotificationsAsReadApi(
      queryParams.type || undefined
    );
    if (response.code === 200) {
      ElNotification({
        title: "标记成功",
        message: `已将${queryParams.type ? "当前类型的" : ""}所有通知标记为已读`,
        type: "success",
        duration: 3000,
        position: "top-right"
      });

      // 刷新列表和统计
      await loadNotifications();
      await loadStats();
    }
  } catch (error) {
    if (error !== "cancel") {
      ElMessage.error("操作失败");
      console.error(error);
    }
  }
};

// 标记单条为已读
const handleMarkAsRead = async (item: NotificationDetail) => {
  try {
    const response = await markNotificationAsReadApi(item.id);
    if (response.code === 200) {
      item.isRead = 1;
      await loadStats();
    }
  } catch (error) {
    ElMessage.error("标记已读失败");
    console.error(error);
  }
};

// 点击通知项
const handleItemClick = (item: NotificationDetail) => {
  // 如果未读，先标记为已读
  if (item.isRead === 0) {
    handleMarkAsRead(item);
  }

  // 跳转到目标页面
  if (item.target?.url) {
    const cleanUrl = sanitizeUrl(item.target.url);
    router.push(cleanUrl);
  }
};

// 清理 URL，确保是客户端路径
const sanitizeUrl = (url: string): string => {
  if (!url) return url;

  let cleanUrl = url;

  // 如果是完整的 URL(包含协议),尝试提取路径部分
  try {
    if (url.startsWith("http://") || url.startsWith("https://")) {
      const urlObj = new URL(url);
      cleanUrl = urlObj.pathname + urlObj.search + urlObj.hash;
    }
  } catch (e) {
    console.warn("⚠️ 无法解析 URL:", url, e);
  }

  // 将 /article/ 路径转换为 /user/article/ (用户端路径)
  if (cleanUrl.startsWith("/article/")) {
    cleanUrl = "/user" + cleanUrl;
  }

  return cleanUrl;
};

// 格式化时间
const formatTime = (time: string) => {
  if (!time) return "";

  const now = new Date();
  const noticeTime = new Date(time);
  const diff = now.getTime() - noticeTime.getTime();

  const minutes = Math.floor(diff / 60000);
  const hours = Math.floor(diff / 3600000);
  const days = Math.floor(diff / 86400000);

  if (minutes < 1) return "刚刚";
  if (minutes < 60) return `${minutes}分钟前`;
  if (hours < 24) return `${hours}小时前`;
  if (days < 7) return `${days}天前`;

  return time.split(" ")[0]; // 返回日期部分
};

// 获取动作文本（包含文章名）
const getActionText = (item: NotificationDetail) => {
  const anyItem = item as any;
  const targetTitle = anyItem.target?.title;

  if (item.type === "COMMENT") {
    return targetTitle ? `评论了你的文章《${targetTitle}》` : "评论了你";
  } else if (item.type === "REPLY") {
    return targetTitle
      ? `回复了你在《${targetTitle}》中的评论`
      : "回复了你的评论";
  } else if (item.type === "MENTION") {
    return targetTitle ? `在《${targetTitle}》中提到了你` : "在评论中提到了你";
  }

  return item.title || "";
};

// 获取评论/回复的具体内容
const getCommentContent = (item: NotificationDetail) => {
  const anyItem = item as any;
  // 优先使用 commentDetail.content（新字段）
  if (anyItem.commentDetail?.content) {
    return anyItem.commentDetail.content;
  }
  // 兼容旧字段
  return anyItem.target?.summary || "";
};

// 获取原评论（被回复的评论）
const getOriginalComment = (item: NotificationDetail) => {
  const anyItem = item as any;
  // 只有回复类型才显示原评论
  if (item.type === "REPLY" && anyItem.originalComment) {
    return anyItem.originalComment;
  }
  return null;
};

// 获取文章信息
const getArticleInfo = (item: NotificationDetail) => {
  const anyItem = item as any;
  return anyItem.articleInfo || null;
};

// 跳转到文章
const handleJumpToArticle = (item: NotificationDetail) => {
  const anyItem = item as any;
  const url = anyItem.articleInfo?.url;
  if (!url) return;
  const cleanUrl = sanitizeUrl(url);
  router.push(cleanUrl);
};

// 进入选择模式
const enterSelectionMode = () => {
  selectionMode.value = true;
  selectedIds.value = [];
  selectAll.value = false;
};

// 退出选择模式
const exitSelectionMode = () => {
  selectionMode.value = false;
  selectedIds.value = [];
  selectAll.value = false;
};

// 切换选择状态
const toggleSelect = (id: number) => {
  const index = selectedIds.value.indexOf(id);
  if (index > -1) {
    selectedIds.value.splice(index, 1);
  } else {
    selectedIds.value.push(id);
  }

  // 更新全选状态
  selectAll.value = selectedIds.value.length === notificationList.value.length;
};

// 全选/取消全选
const handleSelectAll = (checked: boolean) => {
  if (checked) {
    selectedIds.value = notificationList.value.map(item => item.id);
  } else {
    selectedIds.value = [];
  }
};

// 删除单条通知
const handleDeleteSingle = async (id: number) => {
  try {
    const response = await deleteNotificationApi(id);
    if (response.code === 200) {
      ElMessage.success("删除成功");
      await loadNotifications();
      await loadStats();
    }
  } catch (error) {
    ElMessage.error("删除失败");
    console.error(error);
  }
};

// 批量删除
const handleBatchDelete = async () => {
  if (selectedIds.value.length === 0) {
    ElMessage.warning("请先选择要删除的通知");
    return;
  }

  try {
    await ElMessageBox.confirm(
      `确定要删除选中的 ${selectedIds.value.length} 条通知吗？`,
      "确认删除",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }
    );

    const response = await batchDeleteNotificationsApi(selectedIds.value);
    if (response.code === 200) {
      ElMessage.success("批量删除成功");
      exitSelectionMode();
      await loadNotifications();
      await loadStats();
    }
  } catch (error) {
    if (error !== "cancel") {
      ElMessage.error("批量删除失败");
      console.error(error);
    }
  }
};

// 初始化
onMounted(() => {
  // 🔑 不在这里自动加载数据，由父组件在切换标签页时手动触发
  // 这样可以避免重复请求，并支持每次切换都刷新数据
  // 🔑 标记为已初始化
  isInitialized.value = true;
});

// 暴露方法给父组件
defineExpose({
  loadNotifications,
  loadStats
});
</script>

<style scoped lang="scss">
.comment-reply-list {
  // 筛选区域
  .filter-section {
    padding: 24px;
    background: #fff;

    .filter-container {
      display: flex;
      flex-direction: row;
      gap: 32px;
      align-items: flex-start;

      .filter-group {
        display: flex;
        flex-direction: column;
        gap: 4px;

        .filter-label {
          margin-bottom: 8px;
          font-size: 14px;
          font-weight: 600;
          color: #334155;
        }

        .filter-buttons {
          display: flex;
          flex-wrap: wrap;
          gap: 4px;

          .el-button {
            border-radius: 8px;
            transition: all 0.3s ease;

            .el-icon {
              margin-right: 4px;
              font-size: 16px;
            }

            &:hover {
              transform: translateY(-2px);
            }

            .status-dot {
              display: inline-block;
              width: 8px;
              aspect-ratio: 1;
              margin-right: 6px;
              border-radius: 50%;

              &.unread {
                background: #10b981;
                box-shadow: 0 0 8px rgb(16 185 129 / 60%);
              }

              &.read {
                background: #94a3b8;
              }
            }

            // 通知数量角标
            .count-badge {
              display: inline-flex;
              align-items: center;
              justify-content: center;
              min-width: 18px;
              padding: 2px 5px;
              margin-left: 6px;
              font-size: 11px;
              font-weight: 700;
              line-height: 1;
              color: #fff;
              background: linear-gradient(135deg, #f43f5e 0%, #dc2626 100%);
              border-radius: 9px;
              box-shadow: 0 2px 6px rgb(244 63 94 / 35%);
            }

            // 激活状态下的角标
            &.el-button--primary .count-badge {
              color: #667eea;
              background: #fff;
              box-shadow: 0 2px 6px rgb(0 0 0 / 15%);
            }
          }

          .filter-badge {
            margin-left: 4px;

            :deep(.el-badge__content) {
              padding: 2px 5px;
              font-size: 11px;
              line-height: 1;
              border: none;
            }
          }
        }
      }
    }
  }

  // 批量操作工具栏
  .batch-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: #fff;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;

    .actions-left {
      display: flex;
      gap: 16px;
      align-items: center;

      .result-count {
        font-size: 14px;
        color: #4e5969;

        strong {
          font-weight: 600;
          color: #1d2129;
        }

        .unread-count {
          color: #ff7a45;
        }
      }

      .selected-count {
        font-size: 14px;
        color: #4e5969;

        strong {
          font-weight: 600;
          color: #1677ff;
        }
      }
    }

    .actions-right {
      display: flex;
      gap: 12px;

      .el-button {
        font-weight: 500;
        transition: all 0.3s ease;

        &:hover {
          box-shadow: 0 4px 12px rgb(102 126 234 / 25%);
          transform: translateY(-1px);
        }
      }
    }
  }

  // 通知列表
  .notification-list {
    padding: 20px;
    background: #fff;

    .notification-item {
      display: flex;
      align-items: center;
      padding: 12px 0;
      cursor: pointer;
      border-bottom: 1px solid #f2f3f5;
      transition: all 0.2s ease;

      &:last-child {
        border-bottom: none;
      }

      &:hover {
        padding-right: 12px;
        padding-left: 12px;
        background: #f8fafc;
        border-radius: 6px;
        box-shadow: 0 2px 8px rgb(0 0 0 / 5%);
        transform: translateX(2px);
      }

      &.is-unread {
        .content-header .user-name {
          font-weight: 600;
          color: #1d2129 !important;
        }
      }

      &.selection-mode {
        padding-left: 0;

        &:hover {
          background: #f5f7fa;
          border-radius: 6px;
        }
      }

      // 选择框容器
      .item-checkbox {
        display: flex;
        align-items: center;
        padding: 0 12px;
        margin-right: 8px;

        .el-checkbox {
          :deep(.el-checkbox__inner) {
            width: 18px;
            aspect-ratio: 1;
          }

          :deep(.el-checkbox__label) {
            display: none;
          }
        }
      }

      // 左侧图标
      .item-icon {
        position: relative;
        flex-shrink: 0;
        width: 36px;
        margin-right: 12px;

        .icon-wrapper {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          aspect-ratio: 1;
          border-radius: 50%;
          transition: all 0.2s ease;

          &.icon-comment {
            color: #1677ff;
            background: #e6f7ff;
          }

          &.icon-reply {
            color: #722ed1;
            background: #f9f0ff;
          }

          &.icon-mention {
            color: #fa8c16;
            background: #fff7e6;
          }
        }

        .unread-dot {
          position: absolute;
          top: -2px;
          right: -2px;
          width: 8px;
          aspect-ratio: 1;
          background: #ff4d4f;
          border: 2px solid #fff;
          border-radius: 50%;
        }
      }

      // 中间内容
      .item-content {
        flex: 1;
        min-width: 0;
        overflow: hidden;

        .content-header {
          display: flex;
          gap: 10px;
          align-items: center;
          margin-bottom: 4px;

          .user-info {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;

            .user-name {
              font-size: 14px;
              font-weight: 500;
              color: #1e293b;
            }

            .action-text {
              font-size: 14px;
              color: #64748b;
            }
          }
        }

        // 原评论框
        .original-comment-box {
          padding: 8px 12px;
          margin-top: 8px;
          background: #fff7ed;
          border-left: 3px solid #fb923c;
          border-radius: 4px;

          .original-label {
            margin-bottom: 4px;
            font-size: 11px;
            font-weight: 600;
            color: #ea580c;
          }

          .original-content {
            font-size: 12px;
            line-height: 1.5;
            color: #78350f;

            .original-author {
              font-weight: 600;
              color: #c2410c;
            }
          }
        }

        .content-summary {
          margin-top: 8px;

          .comment-content {
            position: relative;
            padding: 10px 14px;
            font-size: 13px;
            line-height: 1.6;
            color: #334155;
            background: #f8fafc;
            border-left: 3px solid #667eea;
            border-radius: 4px;

            .quote-icon {
              font-size: 16px;
              font-weight: 700;
              color: #94a3b8;
            }
          }
        }

        // 文章信息框
        .article-info-box {
          display: flex;
          gap: 10px;
          align-items: flex-start;
          padding: 10px 12px;
          margin-top: 8px;
          cursor: pointer;
          background: #f0f9ff;
          border-radius: 6px;
          transition: all 0.2s ease;

          &:hover {
            background: #e0f2fe;
            box-shadow: 0 2px 8px rgb(0 0 0 / 5%);
          }

          .article-icon {
            flex-shrink: 0;
            margin-top: 2px;
            font-size: 16px;
            color: #0284c7;
          }

          .article-content {
            flex: 1;
            min-width: 0;

            .article-title {
              font-size: 13px;
              font-weight: 600;
              color: #0c4a6e;
            }

            .article-summary {
              margin-top: 4px;
              overflow: hidden;
              text-overflow: ellipsis;
              font-size: 12px;
              line-height: 1.4;
              color: #475569;
              white-space: nowrap;
            }
          }
        }
      }

      // 右侧信息
      .item-aside {
        display: flex;
        flex-shrink: 0;
        gap: 8px;
        align-items: center;
        width: 200px;
        margin-left: auto;

        .item-time {
          width: 80px;
          font-size: 12px;
          color: #8a919f;
          text-align: right;
          white-space: nowrap;
        }

        .item-actions {
          display: flex;
          gap: 4px;
          align-items: center;
          justify-content: flex-end;
          width: 80px;

          .read-text {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 48px;
            padding: 4px 12px;
            font-size: 12px;
            color: #94a3b8;
            background: #f8fafc;
            border-radius: 4px;
          }

          .el-button {
            padding: 4px 8px;
            font-size: 12px;
            color: #8a919f;
            transition: all 0.2s ease;

            &:hover {
              color: #1677ff;
              background: #f0f5ff;
            }

            .el-icon {
              font-size: 14px;
            }
          }
        }
      }
    }
  }

  // 分页
  .notification-pagination {
    display: flex;
    justify-content: center;
    padding: 20px;
    background: #fff;
  }
}
</style>
